<template>
    <div class="app-container">
        <el-form ref="queryParamsRef" :model="queryParams" label-width="auto">
            <el-row>
                <el-col style="flex: 1 1 0;">
                    <el-row :gutter="16">
                        <el-col :span="8">
                            <el-form-item label="重点对象：" prop="peopleId">
                                <keyPersonManageSelect v-model="queryParams.peopleId" @change="getList" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="预警名称：" prop="planId">
                                <PlanNameSelect v-model="queryParams.planId" @change="getList" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="事件性质：" prop="nature">
                                <el-select v-model="queryParams.nature" placeholder="选择事件性质" @change="getList">
                                    <el-option value="">全部</el-option>
                                    <el-option v-for="item in nj_event_nature" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="发生时间：">
                                <el-date-picker v-model="searchTime" type="daterange" range-separator="-"
                                    start-placeholder="开始时间" end-placeholder="截止时间" value-format="YYYY-MM-DD"
                                    @change="changeDateTimerHandle" @clear="changeDateTimerHandle" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                        </el-col>
                        <el-col :span="8">
                        </el-col>
                    </el-row>
                </el-col>
                <el-divider direction="vertical" style="height: 84px" />

                <el-col style="flex: 0 0 86px;">
                    <el-space :size="18" direction="vertical">
                        <el-button type="primary" @click="getList">
                            <el-icon class="me-1">
                                <Search />
                            </el-icon>
                            查询
                        </el-button>
                        <el-button @click="resetQueryParamsHandle(queryParamsRef)">
                            <el-icon class="me-1">
                                <Refresh />
                            </el-icon>
                            重置
                        </el-button>

                    </el-space>
                </el-col>
            </el-row>
        </el-form>

        <el-divider class="mt-0" />

        <el-table :data="tableData" v-loading="loading" border stripe
        :row-style="tableRowStyle" @row-dblclick="handleDbClick">
            <el-table-column prop="place" label="发生地点" />
            <el-table-column prop="occurdate" label="发生时间" />
            <el-table-column prop="peopleId" label="重点对象" />
            <el-table-column prop="planId" label="预案名称" />
            <el-table-column prop="stateText" label="状态" width="180" />
            <el-table-column label="操作" width="100" align="center">
                <template #default="scope">
                    <el-button type="primary" size="small" link
                        @click="executeFireActionDetailRef.showDetail(scope.row)">
                        <el-icon class="me-1">
                            <View />
                        </el-icon>
                        详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" v-model:page="paging.pageNum" v-model:limit="paging.pageSize" :total="total"
            @pagination="getList" />

    </div>

    <ExecuteFireActionDetail ref="executeFireActionDetailRef" />
</template>

<script setup>
import PageHeader from "@/components/PageHeader/index.vue";
import { Refresh, Search, View } from "@element-plus/icons-vue";
import { getCurrentInstance, useTemplateRef } from "vue";
import { getEmergencyActionListLeader } from "@/api/FireAction/ExecuteFireAction.js";
import KeyPersonManageSelect from "@/components/KeyPersonManageSelect/KeyPersonManageSelect.vue";
import PlanNameSelect from "@/components/PlanNameSelect/PlanNameSelect.vue";
import ExecuteFireActionDetail from "@/components/ExecuteFireActionDetail/ExecuteFireActionDetail.vue";
import PageEnum from "@/enum/PageEnum.js";

const { proxy } = getCurrentInstance();
const {
    nj_event_nature
} = proxy.useDict('nj_event_nature')

const loading = ref(false)
const total = ref(0)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})
const searchTime = ref([])
const queryParams = ref({
    // 重点对象
    peopleId: '',
    // 预警名称
    planId: '',
    // 事件性质
    nature: '',
    params: {
        'beginTime': '',
        'endTime': ''
    }
})

const tableData = ref([])

const queryParamsRef = useTemplateRef('queryParamsRef')
const executeFireActionDetailRef = useTemplateRef('executeFireActionDetailRef')

onMounted(() => {
    getList()
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
// 获取列表数据
const getList = async () => {
    loading.value = true
    const res = await getEmergencyActionListLeader(queryParams.value, paging.value)
    total.value = res.total
    tableData.value = res.rows
    loading.value = false
}

// 重置查询内容
const resetQueryParamsHandle = async (elForm) => {
    if (!elForm) return
    elForm.resetFields()
    searchTime.value = []
    queryParams.value.params.beginTime = ''
    queryParams.value.params.endTime = ''
    await getList()
}

// 改变时间
const changeDateTimerHandle = (date) => {
    if (date) {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: date[0],
                endTime: date[1]
            }
        }
    } else {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: '',
                endTime: ''
            }
        }
    }
    getList()
}

const handleDbClick = (row)=>{
    executeFireActionDetailRef.value.showDetail(row)
}
</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}</style>